<template>
  <!-- 附加被保人 -->
  <div style="font-size: 14px">
    <div v-for="(items, parentIndex) in list">
      <div class="flex items-center justify-between mt-[30px]">
        <div class="flex items-center">
          <div class="w-[4px] h-[12px] bg-[#EF6800]"></div>
          <div class="ml-[10px] text-[#EF6800]  font-bold" style="font-size: 16px">附加被保人</div>
        </div>
        <div class="flex" v-if="!disabled">
          <div @click="add"
            class="w-[62px]  h-[30px] flex justify-center items-center border border-[#EF6800] rounded-[3px] text-[#EF6800] cursor-pointer">
            添加
          </div>
          <div @click="deletes(parentIndex)" v-show="parentIndex > 0"
            class="w-[62px]  ml-[10px] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[3px] text-[#4F4F4F] cursor-pointer">
            删除
          </div>
          <div v-if="parentIndex == 0" @click="copyProfile()"
            class="w-[62px] ml-[10px] h-[30px] flex justify-center items-center border border-[#BEBEBE] rounded-[3px] text-[#4F4F4F] cursor-pointer">
            同投保人
          </div>
        </div>
      </div>
      <div>
        <div class="mt-[30px] flex" v-if="!disabled">
          <div>附加被保人类型</div>
          <div class="flex">
            <div class="ml-[40px] flex items-center" @click="clicktab(1, parentIndex)">
              <el-image v-if="items.type == 1" :src="getAssetsFile('home/active.png')"
                class="w-[18px] h-[18px] cursor-pointer"></el-image>
              <el-image v-else :src="getAssetsFile('home/noactive.png')"
                class="w-[18px] h-[18px] cursor-pointer"></el-image>
              <div class="ml-[10px]">单位</div>
            </div>
            <div class="ml-[40px] flex items-center" @click="clicktab(2, parentIndex)">
              <el-image v-if="items.type == 2" :src="getAssetsFile('home/active.png')"
                class="w-[18px] h-[18px] cursor-pointer"></el-image>
              <el-image v-else :src="getAssetsFile('home/noactive.png')"
                class="w-[18px] h-[18px] cursor-pointer"></el-image>
              <div class="ml-[10px]">个人</div>
            </div>
          </div>
        </div>
        <div class="flex flex-wrap mt-[30px] w-full">
          <div class="w-[50%]">
            <el-form-item label="附加被保人性质" prop="name">
              <el-select v-model="items.nature" :disabled="disabled" style="width: 20vw">
                <el-option v-for="(items, key) in selectxzList" :key="key" :label="items" :value="items" />
              </el-select>
            </el-form-item>
          </div>
          <div class="w-[50%]">
            <el-form-item label="证件类型" prop="name">
              <el-select v-model="items.card_type" :disabled="disabled" style="width: 20vw">
                <el-option v-for="(item, key) in items.type == 1 ? sleectList1 : selectList" :key="key" :label="item"
                  :value="item" />
              </el-select>
            </el-form-item>
          </div>
          <div class="w-[50%]">
            <el-form-item :label="items.type == 2 ? '姓名' : '单位名称'" prop="name">
              <el-input @change="inputChange($event, items)" :disabled="disabled" style="width: 20vw"
                v-model="items.name" class="w-[318px]"></el-input>

            </el-form-item>
          </div>
          <div class="w-[50%]">
            <el-form-item label="证件号码" prop="name">
              <el-input :disabled="disabled" style="width: 20vw" v-model="items.card_no" class="w-[318px]"></el-input>
            </el-form-item>
          </div>
          <!-- <div v-for="t in items.contentList" class="w-[50%]">
            <el-form-item :label="t.title" prop="name">
              <el-input
                v-if="t.placeholder"
                style="width: 20vw"
                v-model="t.value"
                class="w-[318px]"
              ></el-input>
              <el-select
                v-if="t.title == '附加被保人性质'"
                v-model="t.value"
                style="width: 20vw"
              >
                <el-option
                  v-for="(items, key) in t.selectxzList"
                  :key="key"
                  :label="items"
                  :value="items"
                />
              </el-select>
              <el-select
                v-if="t.title == '证件类型'"
                v-model="t.value"
                style="width: 20vw"
              >
                <el-option
                  v-for="(items, key) in t.selectList"
                  :key="key"
                  :label="items"
                  :value="items"
                />
              </el-select>
            </el-form-item>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import getAssetsFile from "@/utils/getImageurl.ts";
import { homeGetAddress, getBusiness, getBusinessInfo } from "@/utils/api";
import {
  ref,
  defineExpose,
  defineProps,
  watchEffect,
  reactive,
  Ref,
  toRef,
  PropType,
  defineEmits,
} from "vue";
const props = defineProps({
  cardTypeOne: { type: Array }, //单位证件类型
  cardTypeTwo: { type: Array }, //个人证件类型,
  nature: { type: Array<string> }, //被保人性质,
  insured: { type: Array<any> },
  disabled: { type: Boolean, default: false },
  param: { type: Object },
});
const selectList = toRef(props, "cardTypeTwo") as any;
const sleectList1 = toRef(props, "cardTypeOne") as any;
const sleectName = ref("");
const emit = defineEmits(["getChildrenData"]);
const type = ref(0); //0是单位1是个人
const selectxzList = ref([] as any[]); //被保人性质\
const selectxzListName = ref("");
const inputList = ref([{ val: "" }]);

const list = ref([
  {
    card_no: "",
    card_type: "身份证",
    name: "",
    nature: "",
    type: 2, //2是个人 1是公司
  },
]);
interface InfoType {
  type: string;
  nature: string;
  name: string;
  card_type: string;
  card_no: string;
}
const Info = reactive<InfoType>({
  type: "",
  nature: "",
  name: "",
  card_type: "",
  card_no: "",
});

//添加被保人
const add = () => {
  let param = {
    card_no: "",
    card_type: sleectList1.value[0],
    name: "",
    nature: "",
    type: 1, //1是个人 2是公司
  };
  list.value.push(param);

  // param.contentList[0].selectxzList =selectxzList.value;
  // param.contentList[1].selectList = selectList.value;
  // let arr = JSON.parse(JSON.stringify(param));
  // list.value.push(arr);
};
//删除被保人
const deletes = (parentIndex: number) => {
  list.value.splice(parentIndex, 1);
};
const inputChange = async (_: any, item: any) => {

  if (item.type == 1) {
    const res = await getBusinessInfo({ name: item.name });

    if (res.code == 1) {
      item.card_no = res.msg.card_no;
    }

  }

}
//同被保人
const copyProfile = () => {
  emit("getChildrenData");

  if (props.param) {
    isInsuerType();
    list.value[0].name = props.param.insure.name;
    list.value[0].card_no = props.param.insure.card_no;
  }
};
//同步数据 判断是单位还是个人
const isInsuerType = () => {
  if (props.param) {
    //单位
    if (props.param.insure.insure_type == "单位") {
      list.value[0].type = 1;
      list.value[0].card_type = '统一社会信用代码'
    } else {
      list.value[0].type = 2;
      list.value[0].card_type = '身份证'
    }
  }
};
//选择
const clicktab = (val: number, index: number) => {
  // console.log(val, index);
  list.value.forEach((item: any, i: number) => {
    if (index == i) {
      item.type = val;
      if (val == 1) {
        item.card_type = sleectList1.value[0]
      } else {
        item.card_type = selectList.value[0]
      }
      //item.card_type = "";
      item.name = "";
      item.card_no = "";
    }
  });
};
const links = ref<any>([]);
let timeout: ReturnType<typeof setTimeout>;
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  clearTimeout(timeout);
  timeout = setTimeout(async () => {
    const res = await getBusiness({ name: queryString });
    links.value = res.msg.map((t: any) => {
      return {
        value: t.companyName,
        code: t.creditNo,
      };
    });

    cb(links.value);
  }, 1000);
};
const handleSelect = (item: Record<string, any>, parentIndex: number) => {
  list.value.forEach((it: any, index: number) => {
    if (index == parentIndex) {
      it.card_no = item.code;
    }
  })
};
watchEffect(() => {
  if (props.cardTypeTwo) {
    // selectList.value = props.cardTypeTwo; //个人证件
    // list.value[0].contentList[1].selectList = selectList.value
    //sleectName.value = selectList.value[0];
  }
  if (props.nature) {
    selectxzList.value = props.nature;
    // list.value[0].contentList[0].selectxzList = selectxzList.value

    selectxzListName.value = selectxzList.value[0];
  }

  if (props.insured) {
    props.insured.forEach((item: any, index: number) => {
      // let key: keyof InfoType;
      // for (key in Info) {
      //   Info[key] = item[key];
      // }

      list.value[index] = item;
    });
  }
});
defineExpose({
  add,
  deletes,
  Info,
  list,
});
</script>
